<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t("面试情况统计") }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('选择月份')" prop="candidateName">
        <el-date-picker
          v-model="queryParams.month"
          type="month"
          placeholder="选择月"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="queryHandle"
        >{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("重置")
        }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="hrInterviewList"
      border
      show-summary
      tooltip-effect="darkTable"
    >
      <el-table-column
        :label="$t('面试人')"
        align="center"
        prop="nickName"
      />

      <el-table-column :label="$t('已推送')" align="center" prop="interviewNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,0)">{{ scope.row.interviewNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('已处理')" align="center" prop="disposeNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,1)">{{ scope.row.disposeNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('全部待处理')" align="center" prop="notDisposeNumber">
        <template slot="header">
          <span>{{ $t("全部待处理") }}</span>
          <el-tooltip class="item" effect="dark" content="截至当前时间未处理的总数" placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,2)">{{ scope.row.notDisposeNumber }}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('超三天未处理')" align="center" prop="triduumNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,-1)">{{ scope.row.triduumNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('未成功面试')" align="center" prop="notComeOnNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,3)">{{ scope.row.notComeOnNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('面试不通过')" align="center" prop="notSuccessOnNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,4)">{{ scope.row.notSuccessOnNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('面试通过')" align="center" prop="passNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,5)">{{ scope.row.passNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('待维护入职情况')" align="center" prop="situationNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,6)">{{ scope.row.situationNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('放弃入职')" align="center" prop="waiveNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,7)">{{ scope.row.waiveNumber }}</el-button>
        </template>
      </el-table-column>

      <el-table-column :label="$t('已入职')" align="center" prop="entryNumber">
        <template slot-scope="scope">
          <el-button type="text" @click="findInterviewCondition(scope.row,8)">{{ scope.row.entryNumber }}</el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column
        :label="$t('面试人')"
        align="center"
        prop="nickName"
      />
      <el-table-column
        :label="$t('面试人数')"
        align="center"
        prop="interviewNumber"
      />
      <el-table-column
        :label="$t('面试通过人数')"
        align="center"
        prop="passNumber"
      />
      <el-table-column
        :label="$t('入职人数')"
        align="center"
        prop="entryNumber"
      /> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog
      :title="$t(title)"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        height="600"
        style="width: 100%"
      >
        <template slot="empty">
          <el-empty description="暂无数据" />
        </template>
        <el-table-column
          :label="$t('#')"
          type="index"
          align="center"
          show-overflow-tooltip
          width="50"
        >
          <template slot-scope="scope">
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="推送时间" />
        <el-table-column prop="candidateName" label="候选人名称" width="120" />
        <el-table-column prop="cityRegistered" label="所在城市" />
        <el-table-column prop="interviewPost" label="面试岗位" />
        <el-table-column prop="nickName" label="面试人" />
        <el-table-column prop="interviewResult" label="面试结果" />
        <el-table-column prop="interviewRemark" label="面试结果备注" show-overflow-tooltip />
        <el-table-column prop="entryStatus" label="入职情况" />
        <el-table-column prop="entryStatusRemark" label="入职情况备注" show-overflow-tooltip />
        <el-table-column fixed="right" :label="$t('审批状态')" show-overflow-tooltip align="center" width="120">
          <template slot-scope="scope">
            <ProcessStatus :status="scope.row.actStatus" :act-id="scope.row.actId" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  findInterviewNumber, findInterviewNumberByCondition
} from '@/api/oa/hr/hrInterview'
export default {
  data() {
    return {
      // 遮罩层
      loading: true,

      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      hrInterviewList: [],
      // 弹出层标题
      title: '详情',
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        month: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      dict: {
        interviewPostArr: []
      },
      queryConditionParams: {
        nickName: '',
        interviewStatus: ''

      },
      tableData: []
    }
  },
  created() {
    var now = new Date()
    var fd = new Date(now.getFullYear(), now.getMonth(), 1).toLocaleDateString()
     this.queryParams.month = fd
    this.getList()
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true
      findInterviewNumber(this.queryParams).then((response) => {
        this.hrInterviewList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        month: undefined
      }

      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
      this.queryParams.month = null
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.hrInterviewForm.init(null)
      })
    },
    // 根据条件查询 面试人
    findInterviewCondition(row, interviewStatus) {
      this.queryConditionParams = {
         nickName: row.nickName,
         interviewStatus: interviewStatus,
         month: this.queryParams.month,
         interviewPerson: row.interviewPerson
      }
      this.formOpen = true
      this.loading = true
      findInterviewNumberByCondition(this.queryConditionParams).then(res => {
        this.tableData = res.data
          this.loading = false
      })
    }
  }
}
</script>
